<template>
  <div class="maxBox">
    <div @click="$router.push('/detail?id='+ item.id )" class="card" v-for="(item, index) in personList" :key="index">
      <img :src="item.pic" alt="" />
      <p>{{ item.name }}</p>
      <p v-html="item.characteristic"></p>
      <p>{{item.recommendStatusStr}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["personList"],
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>

<style lang="scss" scoped>
.maxBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .card {
    width: 47%;
    height: 18.75rem;
    border: 1px solid #000;
    font-size: 12px;
    margin: 5px;
    img {
      width: 100%;
      height: 70%;
    }
  }
}
</style>
